import React from 'react'
import { Button, Icon } from 'antd';
import './style/detail.css'


export default class ListItem extends React.Component {
	constructor(props){
        super(props)
        this.state={
            lists:[]
        }
    }
	render(){
        const listShows = this.state.lists.map((list,index)=>{
            return  <tr>
                    <td className="t1">
                         <div className='icon'>
                            <Icon className="ply" type="play-circle-o"  />
                        </div>
                    </td>
                    <td className="t2">{list.title}</td>
                    <td className="t3">{list.author}</td>
                    <td className="t4">{list.album_title}</td>
                    <td className="t5">
                          <div className='icon'>
                         <Icon className="download" type="download"  />
                         </div>
                    </td>
                     <td className="t6">
                           <div className='icon'>
                         <Icon className="collect" type="star-o" />
                         </div>
                     </td>

                </tr>
        })
        return(
            <div>
                <h3>歌曲列表</h3>
            <table className='m-table'>
            <thead>
                    <tr>
                    <th className="w1"><div className="wp">播放</div></th>
                    <th className="w2"><div className="wp">歌曲标题</div></th>
                    <th className="w3"><div className="wp">歌手</div></th>
                    <th className="w4"><div className="wp">专辑</div></th>
                    <th className="w5"><div className="wp">下载</div></th>
                    <th className="w6"><div className="wp">收藏</div></th>
                    </tr>
                </thead>
                <tbody className='t-body'>
                    {listShows}
                </tbody>

            </table>
            </div>
        )
    }
    componentDidMount(){
    	var that = this;
    	var ajaxData = {
    		type : 'get',
    		url : 'http://www.caojin.online/api/nowlist.php',
    	}
    	var ajax=new XMLHttpRequest();
		ajax.open(ajaxData.type,ajaxData.url,true);
		ajax.send();
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4 && ajax.status==200){
				var arr=JSON.parse(ajax.responseText);
				that.setState({
                    lists : arr.song_list
                })
			}else{
				console.log(ajax.responseText);
			}
		}
    }
}